<template>
    <div>
        <div class="capitalheader">
            <div>
                <p>账户余额</p>
                <p class="red">15800.00元</p>
                <div><div>充值</div><div>提现</div></div>
            </div>
            <div>
                <p>本月收入</p>
                <p>4468.00元</p>
            </div>
        </div>
        <div class="capitalcontent">
            <div class="capitalcontenttop">
                <div class="actived">资金明细</div>
                <div>重置明细</div>
                <div>提现明细</div>
                <div>保证金</div>
            </div>
            <div class="capitallist listheader">
                <div>流水编号</div>
                <div>资金类型</div>
                <div>转入/转出</div>
                <div>金额</div>
                <div>交易状态</div>
                <div>日期</div>
            </div>
            <div class="capitallist">
                <div>15465465465</div>
                <div class="color666">提现</div>
                <div class="color666">转出</div>
                <div class="red">225200.00</div>
                <div>失败</div>
                <div>2019-15-11 16:54:24</div>
            </div>
            <div class="capitallist">
                <div>15465465465</div>
                <div class="color666">提现</div>
                <div class="color666">转出</div>
                <div class="red">225200.00</div>
                <div>失败</div>
                <div>2019-15-11 16:54:24</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout:'user'
}
</script>

<style>
.capitalheader{
    height: 166px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
}
.capitalheader>div{
    width: 160px;
    height: 86px;
    margin: 0 50px 0 100px;
}
.capitalheader >div p:nth-child(2){
    font-size: 28px;
}
.capitalheader>div>div>div{
    float: left;
    width: 48px;
    height: 22px;
    border-radius: 5px;
}
.capitalcontent{
    background-color: #fff;
    border-radius: 5px;
}
.capitalcontenttop{
    height: 55px;
    border-bottom: 1px #D2D2D2 solid;
}
.capitalcontenttop div{
    float: left;
    height: 54px;
    text-align: center;
    line-height: 54px;
    padding: 0 11px;
    margin: 0 19px;
    color: #666666;
}
.capitalcontenttop div.active{
   color: #242424;
}
.capitallist.listheader{
    background-color: #F8F7FF;
    height: 34px;
    font-size: 12px;
    color: #666;
    line-height: 34px;
}
.capitallist{
    height: 54px;
    line-height: 54px;
    font-size: 14px;
    border-top: 1px #D2D2D2 solid;
}
.capitallist div{
    text-align: center;
    float: left;
}
.capitallist div:nth-child(1){
    width: 200px;
}
.capitallist div:nth-child(2){
    width: 165px;
}
.capitallist div:nth-child(3){
    width: 140px;
}
.capitallist div:nth-child(4){
    width: 158px;
}
.capitallist div:nth-child(5){
    width: 130px;
}
.capitallist div:nth-child(6){
    width: 190px;
}
.color666{
    color: #666
}
</style>
